<template>
  <div id="app">
    <!-- 数据统计板块 -->
    <div class="data-stats">
      <div class="header">数据统计</div>
      <div class="data-stats-context">
        <div class="stat-box">集群数量
          <div class="stat-number">{{ clusterNumber }}</div>
        </div>
        <div class="stat-box">用户数量
          <div class="stat-number">{{ userNumber }}</div>
        </div>
        <div class="stat-box">租户数量
          <div class="stat-number">{{ tenantNumber }}</div>
        </div>
      </div>
    </div>

    <!-- 列表板块 -->
    <div class="list-section">
      <div class="left">
        <div class="left-list">
          <div class="header">集群资源TOP5</div>
          <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="clusterData"
          max-height="14.375rem"  class="tableBox" :row-style="{height: '2.25rem'}"
    :cell-style="{padding: '0'}"
>
            <el-table-column prop="clusterName" label="名称" width="80rem">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="160rem">
            </el-table-column>
            <el-table-column prop="cpu" label="CPU" width="124rem">
            </el-table-column>
            <el-table-column prop="reverse" label="内存" width="124rem">
            </el-table-column>
            <el-table-column prop="pod" label="pod" width="124rem">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="124rem">
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="150rem">
            </el-table-column>
          </el-table>
        </div>
        <div class="left-list">
          <div class="header">租户分配资源TOP5</div>
          <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="tenantData"
            max-height="14.375rem" :row-style="{height: '2.25rem'}"
    :cell-style="{padding: '0'}"
>
            <el-table-column prop="tenantName" label="租户名" width="150rem">
            </el-table-column>
            <el-table-column prop="cluster" label="集群" width="150rem">
            </el-table-column>
            <el-table-column prop="cpuLimit" label="CPU" width="150rem">
            </el-table-column>
            <el-table-column prop="cpuReverse" label="内存" width="150rem">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="150rem">
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="150rem">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right">
        <div class="right-chart">
          <!-- ECharts 圆形图组件 -->
          <div class="header">用户类别</div>
          <div ref="pieChart" class="pie-chart" style="width: 25rem ;height:24.375rem;"></div>
        </div>
        <!-- 快捷导航板块 -->
        <div class="quick-nav">
          <div class="header">快捷导航</div>
          <div class="quick-nav-context">
            <button @click="navigateToCluster">集群管理</button>
            <button @click="navigateToUser">用户管理</button>
            <button @click="navigateToTenant">租户管理</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { router } from '@/router'
export default {
  data() {
    return {
      clusterData: [
        {
          'clusterName': '集群',
          'address': '192.168.121.224',
          'cpu': '11/120',
          'reverse': '11/120',
          'pod': '11/150',
          'description': '这是集群',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'clusterName': '集群',
          'address': '192.168.121.224',
          'cpu': '11/120',
          'reverse': '11/120',
          'pod': '11/150',
          'description': '这是集群',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'clusterName': '集群',
          'address': '192.168.121.224',
          'cpu': '11/120',
          'reverse': '11/120',
          'pod': '11/150',
          'description': '这是集群',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'clusterName': '集群',
          'address': '192.168.121.224',
          'cpu': '11/120',
          'reverse': '11/120',
          'pod': '11/150',
          'description': '这是集群',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'clusterName': '集群',
          'address': '192.168.121.224',
          'cpu': '11/120',
          'reverse': '11/120',
          'pod': '11/150',
          'description': '这是集群',
          'updateTime': '2024-03-05 18:54:41'
        },
      ],
      tenantData: [
        {
          'tenantName': '租户',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是租户',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'tenantName': '租户',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是租户',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'tenantName': '租户',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是租户',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'tenantName': '租户',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是租户',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'tenantName': '租户',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是租户',
          'updateTime': '2024-03-05 18:54:41'
        },
      ],
      clusterNumber: 10,
      userNumber: 11,
      tenantNumber: 12
    }
  },
  methods: {
    navigateToCluster() {
      this.$router.push({ name: 'ClusterManageF' })
    },
    navigateToUser() {
      this.$router.push({ name: 'UserManageF' })
    },
    navigateToTenant() {
      this.$router.push({ name: 'TenantManageF' })
    },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.pieChart);
    // 指定图表的配置项和数据
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
};
</script>

<style scoped lang="scss">
/* 基本布局和样式 */
body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 1.25rem 1.25rem 1.25rem;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}

/* .tableBox>th {
  padding: 0 !important;
  height: 30px;
  line-height: 30px;
  padding: 0;
}

.tableBox>td {
  padding: 0 !important;
  height: 30px;
  line-height: 30px;
  padding: 0;
} */

.el-table td, .el-table th {
padding: 0.125rem;
}

/* 数据统计板块 */
.data-stats {
  flex: 1;
  border: 0.0625rem solid #ccc;
  /* 添加边框 */
  padding: 0.625rem;
  margin-bottom: 0.625rem;
  border-radius: 0.25rem;
  /* 添加圆角 */
}

.data-stats .header {
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
  font-size: 1.125rem;
  /* 增加距离 */
}

.data-stats .data-stats-context {
  display: flex;
  justify-content: space-evenly;
  align-items: space-between;
}

.stat-box {
  width: 18.75rem;
  height: 3.125rem;
  background-color: #4472c4;
  /* 更改为蓝色 */
  color: white;
  padding: 0.625rem;
  text-align: center;
  border-radius: 0.25rem;
  margin-right: 1.875rem;
}

.stat-number {
  font-size: 1.25rem;
  font-weight: bold;
}

/* 列表板块 */
/* 整个大盒子的样式 */
.list-section {
  flex:4;
  display: flex;
  height: 12.5rem;
}

/* 左边盒子的样式 */
.left {
  flex: 2;
  /* 占据一半空间 */
  display: flex;
  flex-direction: column;
  /* 子元素垂直排列 */
}

/* 右边盒子的样式 */
.right {
  flex: 1;
  /* 占据另一半空间 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  flex-wrap: wrap;
  flex-direction: column;
  width: 37.5rem;
}

/* 表格的样式可以根据需要进一步调整 */
.left-list {
  /* 使每个列表占据相等的空间 */
  margin-bottom: 0.625rem;
  /* 添加列表之间的间距 */
  border: 0.0625rem solid #ccc;
  /* 添加边框 */
  padding: 0.625rem;
  border-radius: 0.25rem;
}

/* 最后一个列表不添加下边距 */
.left-list:last-child {
  margin-bottom: 0;
}

.left-list .header {
  font-weight: bold;
  font-size: 1.125rem;
}

.right-chart {
  flex:3;
}

.right-chart .header {
  font-weight: bold;
  font-size: 1.125rem;
  margin-top: 1.25rem;
  margin-left: 1.25rem;
  /* 增加距离 */
}

.right-chart .pie-chart {
  width: 100%;
  height: 100%;
}

/* 快捷导航板块 */
.quick-nav {
  flex:1;
  border: 0.0625rem solid #ccc;
  /* 添加边框 */
  padding: 0.625rem;
  border-radius: 0.25rem;
  /* 添加圆角 */
}

.quick-nav .header {
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  text-align: left;
  /* 左对齐 */
}

.quick-nav .quick-nav-context {
  display: flex;
}

.quick-nav button {
  width: 11.25rem;
  background-color: #4472c4;
  color: white;
  border: none;
  padding: 1.25rem 1.25rem;
  margin-right: 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.quick-nav button:last-child {
  margin-right: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stat-box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.625rem;
  }

  .left-list,
  .right-chart {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .quick-nav button {
    width: 100%;
    margin-bottom: 0.625rem;
  }
}
</style>